<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F4F4F4;
        }
        .top {
            width: 100%;
            height: 3.2rem;
        }
        .top-left img {
            width: 2.1rem;
            height: 2.1rem;
            float: left;
            padding-left: .5rem;
            padding-top: 0.5rem;
        }
        .top-content {
            float: left;
            padding-left: .5rem;
            padding-top: .5rem;
        }
        
        .top-content p:nth-of-type(1) {
            font-size: .8rem;
            margin: 0;
        } 
        .top-content p:nth-of-type(2) {
            font-size: .6rem;
            color: #333;
            margin: 0;
        }
        a {
            float: right;
            width: 3.4rem;
            height: 1.5rem;
            font-size: .7rem;
            color: #fff;
            text-align: center;
            line-height: 1.5rem;
            background-color: #EF4238;
            margin-top: .8rem;
            margin-right: .6rem;
            border-radius: 6%;
        }
        video {
            width: 100%;
            height: auto;
        }
        .boddom {
            padding:.3rem .5rem;
        }
        .boddom p {
            font-size: 16px;
        }
        .last {
            display: flex;
        }
        .img img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }
        .title {
            font-size: 14px;
            margin-left: .5rem;
        }
        .contene {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="top-left">
            <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/avatar.png" alt="">
        </div>
        <div class="top-content">
            <p>猫眼</p>
            <p>在线选座，热门影讯，爱上看电影</p>
        </div>
        <a>打开App</a>
    </div>
    <div class="contene">
        <div class="video">
        <video src="https://vod.pipi.cn/fec9203cvodtransbj1251246104/df50a34b3701925924907740845/v.f42905.mp4" controls></video>
    </div>
    <div class="boddom">
        <p>《长津湖》破29亿票房，助易烊千玺主演电影票房破60亿！</p>
        <div class="last">
            <div class="img">
                <img src="https://p0.meituan.net/moviemachine/d0100a0f341337dbeb9b0d9a67e712f3853917.png@118w_118h_1e_1c" alt="">
            </div>
            <div class="title">阿猫电影</div>
        </div>
    </div>
    </div>
</body>
<script>
        (function () {
        function w() {
            var all = document.documentElement;  // 获取html元素
            var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
            console.log(123,test)
            if (test > 1024) {
                test = 1024;
            }
            rem = test / 18.75;
            console.log(rem)
            all.style.fontSize = rem + 'px'
        }
        w();
        window.addEventListener("resize", function () {
            w()
        }, false)
    })();
</script>
</html>